<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"/>
    <meta http-equiv="Pragma" content="no-cache"/>
    <meta http-equiv="Cache-Control" content="no-cache,must-revalidate"/>
    <meta http-equiv="Expires" content="0"/>
    <meta http-equiv="Cache" content="no-cache"/>
    <title>设备截图</title>
    <script type="text/javascript" th:src="@{/lib/jquery-3.3.1.js}"></script>


    <style type="text/css">
        .snapTable {
            display: table;
            border-collapse: collapse;
            width: 95%;
            margin: auto;
            margin-top: 40px;
            text-align: center;
            empty-cells: show;
            border: 1px solid #636363;
        }

        .row {
            display: table-row;
            margin-top: 20px;
            border: 1px solid #636363;
        }

        .row .col {
            display: table-cell;
            vertical-align: middle;
            width: 20%;
            border: 1px solid #636363;
        }

        .snapImg {
            width: 80%;
            height: 300px;
        }
    </style>
</head>
<body>

<!--<div th:each="device,deviceIndex:${deviceList}">
    <p th:text="${device.DEVICE_ID}"></p>
    <p th:text="${device.PHONE}"></p>
    <p th:text="${device.DEVICE_ID}"></p>
    <div th:each="snap:${device.snapList}">
        <p th:text="${snap.screenID}"></p>
        <p th:text="${snap.screenType}"></p>
        <p th:text="${snap.snapPath}"></p>
    </div>
    ————————————————
</div>-->

<div id="snapTable">
    <div th:fragment="snapTable">
        <input id="deviceListData" th:value="${deviceList}" type="hidden"/>
        <div style="height: 50px">
            地点：<input id="regionQuery" type="text"/>
            设备号：<input id="deviceIdQuery" type="text"/>
            <input id="searchBtn" type="button" value="查询" onclick="refreshTable()"/>


            共<span th:text="${total}"></span>条记录
            共<span id="pages" th:text="${pages}"></span>页
            当前 第<span id="pageNum" th:text="${pageNum}"></span>页
            每页
            <select id="pageSize" onchange="refreshTable()">
                <option th:selected="${pageSize}==5" value="5">5</option>
                <option th:selected="${pageSize}==10" value="10">10</option>
                <option th:selected="${pageSize}==15" value="15">15</option>
                <option th:selected="${pageSize}==20" value="20">20</option>
                <option th:selected="${pageSize}==30" value="30">30</option>
                <option th:selected="${pageSize}==999" value="999">全部</option>
            </select>条
            <a id="prePageBtn" th:if="${pageNum} gt 1" href="javascript:void(0)" style="" onclick="prePage()">上一页</a>
            <a id="nextPageBtn" th:if="${pageNum} lt ${pages}" href="javascript:void(0)"
               style="visibility:visible;margin-left: 50px" onclick="nextPage()">下一页</a>

        </div>
        <div>
            <div class="snapTable">
                <div class="row" th:each="device,deviceIndex:${deviceList}">
                    <div class="col">
                        设备编号: <span th:text="${device.DEVICE_ID}">1111</span><br/>
                        区域: <span th:text="${device['REGION'] != null} ? ${device.REGION} : '未知' ">22222</span><br/>
                        电话号码: <span th:text="${device['PHONE'] != null}  ? ${device.PHONE} : '未知'">22222</span><br/>
                    </div>
                    <div class="col" th:each="snap:${device.snapList}">
                        屏幕编号：<span th:text="${snap.screenID}"></span><br/>
                        屏幕类型：<span th:text="${snap.screenType}"></span><br/>
                        截屏时间：<span th:text="${#dates.format(snap.snapTime,'yyyy-MM-dd HH:mm:ss')}"></span><br/>
                        <img class="snapImg" th:src="${snap.snapPath}"/>
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>


</body>
<script type="text/javascript">
    /*<![CDATA[*/
    $(function () {

        // console.log("start snapHome");
        // console.log($("#deviceListData").val());
        /*$("#searchBtn").click(function () {
            refreshTable();
        });*/
    });

    function refreshTable() {
        console.log($("#regionQuery").val(), $("#pageSize").val(), $("#pageNum").text());
        $.ajax({
            url: "/snapMonitor/refreshHome",
            type: 'get',
            data: {
                deviceId: $("#deviceIdQuery").val(),
                region: $("#regionQuery").val(),
                pageSize: $("#pageSize").val(),
                pageNum: $("#pageNum").text()
            },
            success: function (data) {
                $('#snapTable').html(data);
                //checkChangePageBtn();
            }
        })
    }

    function nextPage() {
        $("#pageNum").text($("#pageNum").text() * 1 + 1);
        //checkChangePageBtn();
        refreshTable();
    }

    function prePage() {
        $("#pageNum").text($("#pageNum").text() * 1 - 1);
        //checkChangePageBtn();
        refreshTable();
    }

    function checkChangePageBtn() {
        var pageNum = $("#pageNum").text() * 1;
        var pages = $("#pages").text() * 1;
        if (pageNum === 1 && pageNum < pages) {
            $("#prePageBtn")[0].style.visibility = "hidden";
            $("#nextPageBtn")[0].style.visibility = "visible";
        } else if (pageNum > 1 && pageNum < pages) {
            $("#prePageBtn")[0].style.visibility = "visible";
            $("#nextPageBtn")[0].style.visibility = "visible";
        } else {
            console.log($("#prePageBtn"))
            $("#prePageBtn")[0].style.visibility = "visible";
            $("#nextPageBtn")[0].style.visibility = "hidden";
        }
    }

    function transformTime(timestamp) {
        if (timestamp) {
            var time = new Date(timestamp);
            var y = time.getFullYear(); //getFullYear方法以四位数字返回年份
            var M = time.getMonth() + 1; // getMonth方法从 Date 对象返回月份 (0 ~ 11)，返回结果需要手动加一
            var d = time.getDate(); // getDate方法从 Date 对象返回一个月中的某一天 (1 ~ 31)
            var h = time.getHours(); // getHours方法返回 Date 对象的小时 (0 ~ 23)
            var m = time.getMinutes(); // getMinutes方法返回 Date 对象的分钟 (0 ~ 59)
            var s = time.getSeconds(); // getSeconds方法返回 Date 对象的秒数 (0 ~ 59)
            return y + '-' + M + '-' + d + ' ' + h + ':' + m + ':' + s;
        } else {
            return '';
        }
    }

    /*]]>*/
</script>
</html>